<!DOCTYPE html>
<html lang="zh"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>首页 - 天才(genius)后台管理系统</title>

    <link href="css/style.min.css" rel="stylesheet">
    <link rel="icon" th:href="@{favicon.ico}" type="image/ico">
    <link href="css/bootstrap.min.css" th:href="@{~/css/bootstrap.min.css}" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" th:href="@{~/css/materialdesignicons.min.css}" rel="stylesheet">
    <link href="css/style.min.css" th:href="@{~/css/style.min.css}" rel="stylesheet">
    <!--时间选择插件-->
    <link rel="stylesheet" th:href="@{~/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}" href="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
    <!--日期选择插件-->
    <link rel="stylesheet" th:href="@{~/js/bootstrap-datepicker/bootstrap-datepicker3.min.css}" href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
    <!--标签插件-->
    <link rel="stylesheet" th:href="@{~/js/jquery-tags-input/jquery.tagsinput.min.css}" href="js/jquery-tags-input/jquery.tagsinput.min.css">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside th:include="left :: common" class="lyear-layout-sidebar">
        </aside>
        <!--End 左侧导航-->
        <!--头部信息-->
        <header th:include="head :: common" class="lyear-layout-header">
        </header>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <form action="/study-examination/examinationadd" method="post" id="save_emp">
                <div class="container-fluid">
                    <form action="#!" method="post" class="row">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-lg-12">
                                     <div class="card">
                                          <div class="card-header"> <label>考试开始时间</label></div>
                                               <div class="card-body">
                                                    <input class="form-control js-datetimepicker" type="text" th:onblur="save()"  id="examinationBeginTime" name="examinationBeginTime1" placeholder="请输入具体时间"  data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm" />
                                                         </div>
                                                             <div class="card-header"><label>考试结束时间</label></div>
                                                                 <div class="card-body">
                                                                      <input class="form-control js-datetimepicker" type="text" onblur="save();savetime()" id="examinationEndTime" name="examinationEndTime1" placeholder="请输入具体时间"  data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm" />

                                                                 </div>
                                                             <div class="card-header"><label>考试时长</label></div>
                                                             <div class="card-body">
                                                                 <input type="hidden" id="examinationPaperduration1"   name="examinationPaperduration" />

                                                                 <input type="text" id="examinationPaperduration"  disabled="disabled"placeholder="请输入考试时长"/><span>分钟</span>

                                                             </div>
                                                             <div class="card-header"><label>试卷名称</label></div>
                                                                <div class="card-body">
                                                                 <select id="testPaperId" name="testPaperId"  class="form-control" th:onblur="save()"placeholder="请输入试卷名称">

                                                                     <option value="1">试卷一</option>
                                                                     <option value="2">试卷二</option>
                                                                     <option value="3">试卷三</option>
                                                                     <option value="4">试卷四</option>

                                                                 </select>
                                                                   </div>
                                                             </div>
                                                             </div>

                                                         </div>


                                                 <div class="form-group col-md-12 alert alert-danger" role="alert"  hidden="true" id="msg"></div>
                                                     <button type="button" class="btn btn-primary" id="svemp" data-toggle="modal" data-target=".bs-example-modal-sm">保存</button>

                                                 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                                 <div class="modal-dialog modal-sm" role="document">
                                                     <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                            <h4 class="modal-title" id="myLargeModalLabel">考试新增</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            是否确认添加😊
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                            <button type="button" onclick="add()" class="btn btn-primary">点击保存</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                                <button type='button' class='btn btn-default' onclick="javascript:history.back(-1);return false;">返 回</button>
                                        </div>

                           </form>

                    </div>
             </form>
        </main>
    </div>
    <!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" th:src="@{~/js/jquery.min.js}" src="js/jquery.min.js"></script>
<script type="text/javascript" th:src="@{~/js/bootstrap.min.js}" src="js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{~/js/perfect-scrollbar.min.js}" src="js/perfect-scrollbar.min.js"></script>
<script src="/js/jconfirm/jquery-confirm.min.js" th:src="@{~/js/jconfirm/jquery-confirm.min.js}"></script>
<script type="text/javascript" th:src="@{~/js/main.min.js}" src="js/main.min.js"></script>
<!--时间选择插件-->
<script th:src="@{~/js/bootstrap-datetimepicker/moment.min.js}" src="js/bootstrap-datetimepicker/moment.min.js"></script>
<script th:src="@{~/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}" src="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script th:src="@{~/js/bootstrap-datetimepicker/locale/zh-cn.js}" src="js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script th:src="@{~/js/bootstrap-datepicker/bootstrap-datepicker.min.js}" src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script th:src="@{~/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}" src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script th:src="@{~/js/main.min.js}" type="text/javascript" src="js/main.min.js"></script>

<!--图表插件-->
<script type="text/javascript" th:src="@{~/js/Chart.js}" src="js/Chart.js"></script>
<script type="text/javascript">
    function savetime() {

        var ss=(new Date($("#examinationBeginTime").val())).getTime();//开始时间
        var dd=(new Date($("#examinationEndTime").val())).getTime();//结束时间
        var examinationPaperduration=(Number(dd)-Number(ss))/ (1000 * 60) //计算相差分钟
        $("#examinationPaperduration").val(examinationPaperduration);
        $("#examinationPaperduration1").val(examinationPaperduration);
        if(examinationPaperduration<0 || examinationPaperduration==0
        ){
            alert("考试结束时间不能早于开始时间")
        }


    }




     



    function examinationBeginTime() {

        save();
    }
    function examinationEndTime() {
        save();
    }

    function testPaperId() {
        save();
    }
    function save() {
        $("#svemp").attr({"disabled":"disabled"});
        var examinationBeginTime =$("#examinationBeginTime").val();
        var examinationEndTime=$("#examinationEndTime").val();
        var examinationPaperduration=$("#examinationPaperduration").val();
        var testPaperId=$("#testPaperId").val();

        if(examinationBeginTime==""||examinationBeginTime==undefined){
            $("#msg").html("考试开始时间不能为空").show();
            setTimeout(function () {
                $("#msg").hide();
            }, 3000);
            return
        }else if(examinationEndTime==""||examinationEndTime==undefined){
            $(function () {
                $("#msg").html("考试结束时间不能为空").show();
                setTimeout(function () {
                    $("#msg").hide();
                }, 3000);
            })
            return

        }else if(testPaperId==""||testPaperId==undefined){
            $(function () {
                $("#msg").html("试卷名称不能为空").show();
                setTimeout(function () {
                    $("#msg").hide();
                }, 3000);
            })
            return
        }
        $("#svemp").removeAttr("disabled");
    }


    function add() {

        $("#save_emp").submit();
    }

  </script>
</body>
</html>